<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>walleItem</title>



    <script src="./jquery/dist/jquery.min.js"></script>
    <script src="./popper.js/dist/umd/popper.min.js"></script>







    <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.min.css">


    <script src="./bootstrap/dist/js/bootstrap.min.js"></script>



    <link rel="stylesheet" href="./summernote/dist/summernote-bs4.css">
    <script src="./summernote/dist/summernote-bs4.js"></script>
    <!--<script src="./summernote/dist/lang/summernote-zh-CN.min.js"></script>-->



    <script src="./vue/dist/vue.min.js"></script>
    <script src="./moment/moment.js"></script>
    <script src="./moment/locale/zh-cn.js"></script>
</head>

<body>

    <div class="container" style="margin: 20px auto;" id="ezDetailApp">



        <form>

            <button type="button" onclick="window.close();" class="btn btn-secondary">取消</button>
            <button type="button" class="btn btn-primary" @click="fnSave">保存</button>
            <div class="form-group" v-show="false">
                <label for="">index.sid</label>
                <input type="text" v-model="ezDetailForm.ezIndex.sid" class="form-control" placeholder=""
                    aria-describedby="helpId">
            </div>
            <div class="form-group" v-show="false">
                <label for="">sid</label>
                <input type="text" v-model="ezDetailForm.sid" class="form-control" placeholder=""
                    aria-describedby="helpId">
            </div>
            <!--<div class="form-group">-->
            <!--<label for="">tags</label>-->
            <!--<input type="text" v-model="walleCardForm.tags" class="form-control" placeholder="">-->

            <!--</div>-->
            <div class="form-group">
                <label for="">标题</label>
                <input type="text" v-model="ezDetailForm.sname" class="form-control" placeholder="">

            </div>
            <div class="form-group">
                <label for="">内容</label>

                <div id="summernote1" class="summernote">

                </div>
                <!--<textarea id="summernote1" class="form-control"-->
                <!--v-model="ezDetailForm.note" rows="10"></textarea>-->
            </div>


            <button type="button" onclick="window.close();" class="btn btn-secondary">取消</button>
            <button type="button" class="btn btn-primary" @click="fnSave">保存</button>
        </form>



    </div>


</body>

</html>


<script>


    var vm = new Vue({
        el: '#ezDetailApp',
        data: {


            ezDetailForm: {

                sid: '',
                note: '',
                ezIndex: {

                    sid: '',
                }
            },




        },


        filters: {

            fmtDate(date) {
                return date + moment(date).format('dddd');
            }
        },


        methods: {


            getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },




            //修改 item
            fnSave() {


                var _self = this;


                if (!this.ezDetailForm.sname) {

                    alert('标题 不能为空');
                    return false;
                }


                var markStr = $('#summernote1').summernote('code');

                this.ezDetailForm.note = markStr;


                var postUrl = '/ezDetails';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(_self.ezDetailForm),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {


                        // console.log(response);
                        if (response.code == 0) {
                            _self.ezDetailForm = response.dat;
                            alert('操作成功');
                            // _self.querywalleCardList();
                            //    _self.fnBack2Main();
                        }

                    }
                });
            },


            // 查询 cate
            // queryWallItem() {
            //
            //     var _self = this;
            //     this.ezDetailForm.ezIndex.sid = this.getQueryString("index-id");
            //
            //     if(!sid){
            //         return ;
            //     }
            //
            //
            //
            //     $.ajax({
            //         // crossDomain: true,
            //         type: "get",
            //         url: "./walle-items/" + sid,
            //         // data: "data",
            //         dataType: "json",
            //         success: function (response) {
            //             // console.log(response);
            //             if (response.code == 0) {
            //
            //                 console.log(response);
            //             }
            //
            //         }
            //     });
            // },


            initSummernote() {

                $('#summernote1').summernote({

                    airMode: false,
                    // height: 300,                 // set editor height
                    minHeight: null,             // set minimum height of editor
                    maxHeight: null,             // set maximum height of editor
                    focus: true,                 // set focus to editable area after initializing summernote
                    placeholder: '',
                    tabsize: 2,
                    minHeight: 300,
                    // lang: 'zh-CN',
                    // dialogsFade: true, // Add fade effect on dialogs
                    // dialogsInBody: true, // Dialogs can be placed in body, not in
                    // summernote.
                    // disableDragAndDrop: false,// default false You can disable drag
                    // and drop

                    callbacks: {

                        onImageUpload: function (files, editor, $editable) {

                            // FormData，新的form表单封装，具体可百度，但其实用法很简单，如下
                            var data = new FormData();

                            // 将文件加入到file中，后端可获得到参数名为“file”
                            data.append("file", files[0]);

                            // ajax上传
                            $.ajax({
                                data: data,
                                type: "POST",
                                url: "/file-items/upload", // div上的action
                                cache: false,
                                contentType: false,
                                processData: false,

                                // 成功时调用方法，后端返回json数据
                                success: function (response) {

                                    console.log(response);

                                    if (response.code == 0) {

                                        // editor.insertImage($editable, '../' + response.path);
                                        $("#summernote1").summernote('insertImage',
                                            '../' + response.dat.uploadName);
                                    }
                                },
                                // ajax请求失败时处理
                                error: function () {
                                    alert("上传失败！")
                                }
                            });



                        }
                    }
                });

                // $('#summernote1').summernote('fontSize', 20);
            },



        },
        mounted() {

            this.ezDetailForm.ezIndex.sid = this.getQueryString("index-id");
            // this.queryWallItem();

            this.initSummernote();
        }
    })


</script>